<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body {
	font-family: "Helvetica Neue", Helvetica, "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	/* 	margin: 0; */
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
</style>
</head>
<body>
	<script src="//unpkg.com/vue/dist/vue.js"></script>
	<script src="//unpkg.com/element-ui@2.5.3/lib/index.js"></script>
	<div id="app">
		<el-container> <el-header>后台管理系统</el-header> <el-container>
		<el-aside width="200px">Aside</el-aside> <el-main>
		<div id="left">
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			<el-radio-button :label="false">展开</el-radio-button> <el-radio-button
				:label="true">收起</el-radio-button> </el-radio-group>
			<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
				@open="handleOpen" @close="handleClose" :collapse="isCollapse">
			<el-submenu index="1"> <template slot="title">
			<i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item-group>
			<span slot="title">分组一</span> <el-menu-item index="1-1">选项1</el-menu-item>
			<el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group
				title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item>
			</el-menu-item-group> <el-submenu index="1-4"> <span slot="title">选项4</span>
			<el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item
				index="2"> <i class="el-icon-menu"></i> <span
				slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled>
			<i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item
				index="4"> <i class="el-icon-setting"></i> <span
				slot="title">导航四</span> </el-menu-item> </el-menu>
			<script>
				var Main1 = {
					    data() {
					      return {
					        isCollapse: true
					      };
					    },
					    methods: {
					      handleOpen(key, keyPath) {
					        console.log(key, keyPath);
					      },
					      handleClose(key, keyPath) {
					        console.log(key, keyPath);
					      }
					    }
					  }
					var Ctor1 = Vue.extend(Main1)
					new Ctor1().$mount('#left')
				</script>
		</div>
		<div id="main">
			<template> <el-table :data="tableData" style="width: 60%">
			<el-table-column prop="date" label="日期" width="180">
			</el-table-column> <el-table-column prop="name" label="姓名" width="180">
			</el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template>
			<script>var Main = {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#main')
</script>
		</div>
		</el-main> </el-container> </el-container>
	</div>
	<style>
.el-header, .el-footer {
	background-color: #409EFF;
	text-align: center;
	height: 60px;
	line-height: 60px;
}
</style>
	<script>
		new Vue().$mount('#app')
	</script>
</html>